<template>
	<view class="all-order">
		<gyd-navbar back-color="#fff" :title="title"></gyd-navbar>

		<view class="content">
			<view class="statistics-card">
				<view class="grid">
					<view class="grid-item">
						<text class="label">全部订单(单)</text>
						<text class="value">{{dataInfo.finshNum}}</text>
					</view>
					<view class="grid-item">
						<text class="label">转单单数(单)</text>
						<text class="value">{{dataInfo.transfNum}}</text>
					</view>
				</view>
			</view>

			<gyd-tabs :list="tabsList" @clickItem="changeTab"></gyd-tabs>

			<view class="order-list">
				<view class="order-item" v-for="(item,index) in orderList" :key="index" @click="toDetail(item)">
					<view class="text-row">订单数量：{{item.num}}</view>
					<view class="text-row">配送地点：{{item.address}}</view>
					<view class="text-row NO">订单编号：{{item.order_sn}}</view>
				</view>
				<view class="empty-data" v-if="orderList.length===0">暂无订单数据</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import request from '@/utils/request';
	import cache from '@/utils/cache';
	import util from '@/utils/util';
	import {
		ref,
		reactive,
		toRefs,
		inject,
	} from 'vue';
	import {
		onLoad,
		onShow,
		onReady,
		onPullDownRefresh,
		onReachBottom,
	} from '@dcloudio/uni-app';

	const state = reactive({
		title: '全部订单',
		themeColor: cache.get('themeColor'),
		imgHost: util.requestUrl(),
		master_id: 0,
		dataInfo: {
			finshNum: 10,
			transfNum: 3
		},
		current: 0,
		tabsList: ['全部', '待配送', '配送中', '已完成', '已转单'],
		orderList: []
	});

	//在页面所有元素加载完成后执行（只执行一次）
	onLoad((opt) => {
		console.log('onLoad');
		if (opt.hasOwnProperty('master_id')) {
			console.log('传递参数', opt.master_id);
			state.master_id = opt.master_id;
			getDetail();
		}
	});

	//在页面由不可见变为可见时执行（只要页面显示都会执行）
	onShow(() => {
		console.log('onShow');
	})

	//在页面解析完成之后执行
	onReady(() => {
		console.log('onReady');
	})

	onPullDownRefresh(() => {
		console.log('下拉刷新');
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 1000);
	})

	onReachBottom(() => {
		console.log('触底加载更多');
	})

	function getDetail() {

	}

	function changeTab(index) {
		state.current = index;
	}

	function pageRoute(url) {
		uni.navigateTo({
			url
		});
	}

	function pageTabRoute(url) {
		uni.reLaunch({
			url
		});
	}

	const {
		title,
		themeColor,
		imgHost,
		master_id,
		dataInfo,
		current,
		tabsList,
		orderList
	} = toRefs(state);
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}

	.all-order {
		.content {
			position: relative;
			padding: 0 $m24;

			.statistics-card {
				padding: $m24;
				background-color: #fff;
				border-radius: $radius-16;
				box-shadow: 0 0 6rpx 1rpx rgba(0, 0, 0, 0.05);

				.label {
					font-size: $font-24;
					color: $tips-color;
				}

				.value {
					color: $main-color;
					font-size: $font-32;
				}

				.grid {
					display: flex;
					flex-wrap: wrap;
					justify-content: space-between;

					.grid-item {
						display: flex;
						flex-direction: column;
						flex: 0 0 50%;
						padding: $m12 0;
						box-sizing: border-box;
						text-align: center;
					}
				}
			}

			.tabs {}

			.order-list {
				.order-item {
					padding: $m24 0;
					border-bottom: 1rpx solid $border-color;

					.text-row {
						font-size: $font-28;
						color: $main-color;

						&.NO {
							color: $tips-color;
						}
					}

					&:last-child {
						border-bottom: none;
					}
				}

				.empty-data {
					margin-bottom: $m24;
					padding: $m24;
					background-color: #fff;
					border-radius: $radius-16;
					text-align: center;
					align-items: center;
					justify-content: center;
				}
			}
		}
	}
</style>